<template>
	<div class="zhifubaogl-box">
		<ul class="zhifubaogl-list">
			<li class="zhifubaogl-item" v-for="(item,index) in bankcardlist" @click="xuanzebank(item.bank_id)">
				<span><img src="../../img-user/zhifubaolist.png"/></span>
				<span v-text="item.bank_num.indexOf('.com')==-1?(item.bank_num.slice(0,3)+'****'+item.bank_num.slice(-4)):(item.bank_num.slice(0,2)+'****'+item.bank_num.slice(-8))">187****3567</span>
				<span @click.stop="deletebank(item.bank_id,index)">删除</span>
			</li>
		</ul>
		<router-link to="/newzhifubao" class="tianjiabank">
			<span><img src="../../img-user/icon_jia2@3x.png"/></span>
			<span>添加支付宝账户</span>
		</router-link>
		<deletctrol :msg="deletemsg" @btnstatus="deletebtn" v-show="deleteshow"></deletctrol>
	</div>
</template>

<script>
	import deletctrol from "@/components/widget/deletectrol"
	export default{
		data () {
			return{
				user:0,
				bankcardlist:'',
				czbankid:'',
				shoplistind:'',
				deleteshow:false,
				deletemsg:'你确定要删除该支付宝账号吗？'
			}
		},
		components:{deletctrol},
		created:function(){
			this.user=localStorage.getItem("nt_user");
		},
		methods:{
			xuanzebank:function(id){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_epay&act=check_bank",
					data:{'token':self.user,'bank_id':id,'bank_type':2},
					dataType:'json',
					success:function(res){
						if(res.done){
							history.go(-1);
						}
					}
				});
			},
			deletebank:function(id,num){
				this.czbankid=id;
				this.shoplistind=num;
				this.deleteshow=true;
			},
			deletebtn:function(data){
				if(data){
					var self=this;
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_epay&act=bank_list",
						data:{'token':self.user,'bank_id':self.czbankid},
						dataType:'json',
						success:function(res){
							if(res.done){
								self.bankcardlist.splice(self.shoplistind,1);
								self.deleteshow=false;
							}
						}
					});
				}else{
					this.deleteshow=false;
				}
			}
		},
		mounted:function(){
			var self=this;
			$.ajax({
				type:'get',
				url:furl+'index.php?app=ajax_epay&act=bank_list',
				data:{'token':self.user,'bank_type':2},
				dataType:'json',
				success:function(res){
					if(res.done){
						self.bankcardlist=res.retval;
					}
				}
			})
		}
	}
</script>

<style>
	.zhifubaogl-box{font-size:0;}
	.zhifubaogl-list{padding-top: 0.32rem;padding-left:0.32rem;padding-right: 0.32rem;}
	.zhifubaogl-item{background-image:url(../../img-user/zhifubao_bg.png);background-size:100% 100%;height:1.5rem;border-radius:0.08rem;padding-top: 0.4rem;padding-left: 0.38rem;box-sizing: border-box;margin-bottom: 0.32rem;}
	.zhifubaogl-item img{width:0.85rem;height:0.85rem;}
	.zhifubaogl-item>span:first-child{float:left;margin-right:0.38rem;}
	.zhifubaogl-item>span:nth-child(2){font-size:0.4rem;color:#fff;line-height: 0.85rem;}
	.zhifubaogl-item>span:nth-child(3){font-size:0.28rem;color:#fff;float:right;line-height: 0.85rem;margin-right: 0.39rem;}
	.tianjiabank{display: block;text-align: center;line-height: 0.4rem;}
	.tianjiabank>span:first-child{display: inline-block;width:0.32rem;height:0.32rem;margin-right: 0.12rem;}
	.tianjiabank>span:first-child>img{width:0.26rem;height:0.26rem;vertical-align:top;margin-top: -0.06rem;}
	.tianjiabank>span:last-child{display:inline-block;font-size:0.32rem;color:#339CF3;}
</style>